<template>
  <el-card>
    <div slot="header">编辑项目：{{project.name}}</div>
    <project_info_form v-model="form" :project="project" @submit="submit" :message="message" v-loading="loading"/>
  </el-card>
</template>

<script>
  import Project_info_form from '../component/project_info_form';

  export default {
    components: {Project_info_form},
    data() {
      return {
        loading: true,
        message: {show: false, type: null, content: ''},
        project: {},
        form: {},
      };
    },
    methods: {
      async fetch() {
        this.loading = true;
        const {id: project_id} = this.$route.params;
        const res = await this.$asyncHttp.get(`/api/project/${project_id}`);
        this.loading = false;
        this.project = res.data;
      },
      async submit() {
        console.log('edit submit ', this.form);
        this.loading = true;
        const res = await this.$asyncHttp.post('/api/project', this.form);
        this.loading = false;
        if (res instanceof Error)
          return this.message = {show: true, content: res.message, type: 'error'};

        this.message = {show: true, content: '修改成功！', type: 'success'};
        setTimeout(() => {
          this.message.show = false;
        }, 1500);
      },
    },
    mounted() {
      this.fetch();
    },
  };
</script>

<style scoped>

</style>